<template>
  <view class="reviews-container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 评分统计卡片 -->
    <view class="rating-card">
      <view class="rating-overview">
        <text class="rating-score">{{ averageRating }}</text>
        <text class="rating-label">综合评分</text>
        <view class="rating-stars">
          <text class="iconfont icon-star-fill" v-for="i in 5" :key="i" :style="{ color: i <= averageRating ? '#FFB800' : '#EEEEEE' }"></text>
        </view>
        <text class="rating-count">共{{ totalReviews }}条评价</text>
      </view>
      <view class="rating-stats">
        <view class="stat-item" v-for="(stat, index) in ratingStats" :key="index">
          <text class="star-level">{{ stat.level }}星</text>
          <view class="progress-bar">
            <view class="progress" :style="{ width: stat.percentage + '%' }"></view>
          </view>
          <text class="percentage">{{ stat.percentage }}%</text>
        </view>
      </view>
    </view>

    <!-- 评价列表 -->
    <view class="reviews-list">
      <scroll-view scroll-y class="list-content" @scrolltolower="loadMore">
        <view v-if="reviews.length > 0">
          <view class="review-item" v-for="(item, index) in reviews" :key="index">
            <view class="review-header">
              <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
              <view class="user-info">
                <text class="nickname">{{ item.nickname }}</text>
                <view class="rating-row">
                  <view class="stars">
                    <text 
                      class="iconfont icon-star-fill" 
                      v-for="i in 5" 
                      :key="i"
                      :style="{ color: i <= item.rating ? '#FFB800' : '#EEEEEE' }"
                    ></text>
                  </view>
                  <text class="time">{{ item.createTime }}</text>
                </view>
              </view>
            </view>
            <view class="review-content">
              <text class="text">{{ item.content }}</text>
              <view class="image-list" v-if="item.images && item.images.length">
                <image 
                  v-for="(img, imgIndex) in item.images" 
                  :key="imgIndex" 
                  :src="img" 
                  mode="aspectFill"
                  @tap="previewImage(item.images, imgIndex)"
                ></image>
              </view>
            </view>
            <view class="service-info">
              <text class="label">服务项目：</text>
              <text class="value">{{ item.serviceName }}</text>
            </view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view v-else class="empty-state">
          <image src="/static/icons/empty-reviews.png" mode="aspectFit"></image>
          <text>暂无评价</text>
        </view>

        <!-- 加载更多 -->
        <view class="loading-more" v-if="reviews.length > 0">
          <text v-if="hasMore">加载中...</text>
          <text v-else>没有更多了</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      averageRating: 5.0,
      totalReviews: 0,
      ratingStats: [
        { level: 5, percentage: 0 },
        { level: 4, percentage: 0 },
        { level: 3, percentage: 0 },
        { level: 2, percentage: 0 },
        { level: 1, percentage: 0 }
      ],
      reviews: [],
      page: 1,
      pageSize: 10,
      hasMore: true
    }
  },

  onLoad() {
    this.loadReviewStats()
    this.loadReviews()
  },

  methods: {
    goBack() {
      uni.navigateBack()
    },

    async loadReviewStats() {
      try {
        const result = await uni.request({
          url: `${uni.$config.baseUrl}/member/reviews/stats`,
          method: 'GET',
          header: {
            'Authorization': uni.getStorageSync('token')
          }
        })

        if (result.data.code === 200) {
          const { average, total, stats } = result.data.data
          this.averageRating = average
          this.totalReviews = total
          this.ratingStats = stats
        }
      } catch (err) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },

    async loadReviews() {
      if (!this.hasMore) return

      uni.showLoading({
        title: '加载中...'
      })

      try {
        const result = await uni.request({
          url: `${uni.$config.baseUrl}/member/reviews/list`,
          method: 'GET',
          data: {
            page: this.page,
            pageSize: this.pageSize
          },
          header: {
            'Authorization': uni.getStorageSync('token')
          }
        })

        if (result.data.code === 200) {
          const { list, hasMore } = result.data.data
          this.reviews = this.page === 1 ? list : [...this.reviews, ...list]
          this.hasMore = hasMore
          this.page++
        }
      } catch (err) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    loadMore() {
      if (this.hasMore) {
        this.loadReviews()
      }
    },

    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.reviews-container {
  min-height: 100vh;
  background: #F5F5F5;

  .custom-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    z-index: 100;
    
    .left {
      width: 88rpx;
      display: flex;
      align-items: center;
      
      .iconfont {
        font-size: 36rpx;
        color: #333333;
      }
    }
    
    .center {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      color: #333333;
      font-weight: 500;
    }
    
    .right {
      width: 88rpx;
    }
  }

  .rating-card {
    margin: 20rpx 30rpx 30rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 30rpx;

    .rating-overview {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #F5F5F5;

      .rating-score {
        font-size: 48rpx;
        font-weight: bold;
        color: #333333;
      }

      .rating-label {
        font-size: 24rpx;
        color: #666666;
        margin: 8rpx 0;
      }

      .rating-stars {
        margin: 8rpx 0;
        
        .iconfont {
          font-size: 32rpx;
          margin: 0 4rpx;
        }
      }

      .rating-count {
        font-size: 24rpx;
        color: #999999;
      }
    }

    .rating-stats {
      padding-top: 30rpx;

      .stat-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .star-level {
          width: 80rpx;
          font-size: 24rpx;
          color: #666666;
        }

        .progress-bar {
          flex: 1;
          height: 16rpx;
          background: #F5F5F5;
          border-radius: 8rpx;
          margin: 0 20rpx;
          overflow: hidden;

          .progress {
            height: 100%;
            background: #FFB800;
            border-radius: 8rpx;
          }
        }

        .percentage {
          width: 60rpx;
          font-size: 24rpx;
          color: #999999;
          text-align: right;
        }
      }
    }
  }

  .reviews-list {
    margin: 0 30rpx;
    
    .list-content {
      height: calc(100vh - 400rpx);

      .review-item {
        background: #FFFFFF;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;

        .review-header {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;

          .avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }

          .user-info {
            flex: 1;

            .nickname {
              font-size: 28rpx;
              color: #333333;
              font-weight: 500;
              margin-bottom: 8rpx;
            }

            .rating-row {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .stars {
                .iconfont {
                  font-size: 24rpx;
                  margin-right: 4rpx;
                }
              }

              .time {
                font-size: 24rpx;
                color: #999999;
              }
            }
          }
        }

        .review-content {
          .text {
            font-size: 28rpx;
            color: #333333;
            line-height: 1.6;
          }

          .image-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20rpx;
            gap: 10rpx;

            image {
              width: 180rpx;
              height: 180rpx;
              border-radius: 8rpx;
            }
          }
        }

        .service-info {
          margin-top: 20rpx;
          font-size: 24rpx;

          .label {
            color: #999999;
          }

          .value {
            color: #666666;
          }
        }
      }
    }

    .empty-state {
      padding: 100rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #FFFFFF;
      border-radius: 16rpx;
      color: #999999;

      image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 20rpx;
      }
    }

    .loading-more {
      padding: 30rpx;
      text-align: center;
      color: #999999;
      font-size: 24rpx;
    }
  }
}
</style> 